<form class="form-horizontal"
      ng-class="{'form-group-sm': $storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT}"
      role="form" name="stageGeneralInfo">

  <!-- General Configuration for Pipeline-->
  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label" translate="global.form.name">Name</label>
    <div class="controls col-lg-7 col-md-8">
      <input readonly type="text" class="form-control" name="name"
             ng-model="pipelineConfig.info.name">
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.PIPELINE">
    <label class="col-lg-3 col-md-4 control-label" translate="global.form.description">Description</label>
    <div class="controls col-lg-7 col-md-8">
      <textarea class="form-control" name="description"
                rows="1"
                ng-readonly="isPipelineReadOnly || isPipelineRunning"
                ng-model="pipelineConfig.description"></textarea>
    </div>
  </div>

  <!-- General Configuration for Stages-->
  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE">
    <label class="col-lg-3 col-md-4 control-label" translate="global.form.name">Name</label>
    <div class="controls col-lg-7 col-md-8">
      <input type="text" class="form-control" name="name"
             ng-readonly="isPipelineReadOnly || isPipelineRunning"
             ng-model="detailPaneConfig.uiInfo.label">
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE">
    <label class="col-lg-3 col-md-4 control-label" translate="global.form.description">Description</label>
    <div class="controls col-lg-7 col-md-8">
      <textarea class="form-control" name="description"
                rows="1"
                ng-readonly="isPipelineReadOnly || isPipelineRunning"
                ng-model="detailPaneConfig.uiInfo.description"></textarea>
    </div>
  </div>

  <div class="form-group" ng-if="selectedType === pipelineConstant.STAGE_INSTANCE && stageLibraryList.length > 1">
    <label class="col-lg-3 col-md-4 control-label" translate="home.detailPane.configurationTab.stageLibrary">Stage Library</label>
    <div class="controls col-lg-7 col-md-8">
      <select class="form-control"
              name="stageLibrary"
              ng-disabled="isPipelineReadOnly || isPipelineRunning"
              ng-model="detailPaneConfig.library"
              ng-options="item.library as item.libraryLabel for item in stageLibraryList">
      </select>
    </div>
  </div>

</form>

<form class="form-horizontal" role="form"
      ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
      name="{{detailPaneConfig.instanceName || 'pipeline'}}">
  <div class="form-group"
       ng-class="{'has-error': getConfigurationIssueMessage(detailPaneConfig, configDefinition)}"
       ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: ''} | orderBy: 'displayPosition'"
       ng-if="(!configDefinition.dependsOn || verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === ''"
       ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

    <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
  </div>
</form>
